<template>
	<view class="waste-enterprise-filtrate">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="sel-wrap" v-if="enterpriseType==2">
			<text :class="selVal==1? 'active':''" @click="selVal=1">企业详情</text>
			<text :class="selVal==2? 'active':''" @click="selVal=2">企业设施</text>
		</view>
		<!-- 企业详情 -->
		<view :class="enterpriseType==2?'enterprise-detail-height':'enterprise-detail-height-two'" v-if="selVal==1">

			<view style="margin-top: 17rpx;">
				<view class="title-wrap">
					<view class="status" :style="computedBgc" v-if="agent!=1">
						{{enterpriseDetail?.status==1?'正常':enterpriseDetail?.status==2?'停业':'正常'}}
					</view> <!-- red-status-bgc  图片 -->
					<view class="title">
						<image :src="enterpriseDetail?.logourl || enterpriseDetail?.avatar" mode=""></image>
						<view class="detail">
							<view class="name"
								style="width: 420rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">
								{{enterpriseDetail.enterprisename ||enterpriseDetail.customername}}
							</view>
							<view class="unit">管辖区:{{enterpriseDetail.districtname}}</view>
							<view class="address">地址:{{enterpriseDetail.customeraddress || enterpriseDetail.address}}
							</view>
						</view>
					</view>
					<view class="contact">
						<view class="phone" @click="callPhone">
							<image src="../../static/dis-phone-icon.png" mode=""></image>打电话
						</view>
						<view class="line"></view>
						<view class="msg" @click="sendMsg">
							<image src="../../static/dis-msg-icon.png" mode=""></image>发信息
						</view>
					</view>
				</view>
			</view>
			<view class="enterprise-detail">
				<view class="main">
					<text>企业名称：</text>
					<text class="val">{{enterpriseDetail.enterprisename || enterpriseDetail.customername}}</text>
				</view>
				<view class="main" v-if="agent!=1">
					<text>{{enterpriseType==2?'排污许可证号':"营业执照"}}</text>

					<text class="val">{{无}}</text>
				</view>

				<view class="main" v-if="agent==1">
					<text>排污许可证号：</text>
					<text class="val">{{enterpriseDetail.dischargelicense}}</text>
				</view>
				<view class="main">
					<text>区域：</text>
					<text class="val">{{getAreaText(dataTree,enterpriseDetail.district)}}</text>
				</view>
				<!-- <view class="main">
					<text>管辖地环保局：</text>
					<text class="val">环保局</text>
				</view> -->
				<view class="main">
					<text>详细地址：</text>
					<text class="val">{{enterpriseDetail.customeraddress || enterpriseDetail.address}}</text>
				</view>
				<view class="main">
					<text>{{enterpriseType==2?'环保管理员1：':"联系人"}}</text>
					<text class="val">{{enterpriseDetail.contactperson || enterpriseDetail.hbperson}} &nbsp;&nbsp;
						{{enterpriseDetail.mobile || enterpriseDetail.hbmobile}}</text>
				</view>
				<view class="main" v-if="enterpriseType==2">
					<text>{{enterpriseType==2?'环保管理员2：':'联系人2'}}</text>
					<text class="val">{{enterpriseDetail.hbpersonsecond}}&nbsp;&nbsp;
						{{enterpriseDetail.hbmobilesecond}} </text>
				</view>
				<view class="main">
					<text style="flex-shrink: 0;">经营范围：</text>
					<text class="val">{{enterpriseDetail.businessscope}}</text>
				</view>
				<!-- 	<view class="main">
					<text>{{enterpriseType==2?'年产废规模：':"年处置规模："}}</text>

					<text class="val">10-100吨</text>
				</view> -->
				<view class="main" v-if="enterpriseType==2">
					<text>排污许可证二维码:</text>
				</view>
				<view class="main" v-if="enterpriseType==1">
					<text>资格证书:</text>
				</view>
				<view class="code-wrap">
					<image :style="imgStyle"
						@click="searchImg(enterpriseDetail.lawimageurl,enterpriseDetail.dischargelicenseurl)"
						:src="enterpriseDetail.lawimageurl || enterpriseDetail.dischargelicenseurl" mode=""></image>
				</view>
				<template v-if="agent!=1">
					<view class="btn-wrap" v-if="enterpriseType==2">
						<button
							@click="openDeclare">{{enterpriseDetail.openflag==1?'关闭申报':enterpriseDetail.openflag==2?'开通申报':''}}</button>
						<!-- <button @click="closeDeclare">关闭申报</button> -->
					</view>
				</template>
				<viea class="admin-btn" v-if="agent==1">
					<button @click="editEnterpriseMsg">修改信息</button>
				</viea>
			</view>

		</view>
		<!-- 企业设施 -->
		<view class="enterprise-device" v-if="selVal==2">
			<view class="search-wrap">
				<view class="ipt-wrap">
					<uni-data-select placeholder="设施类型" v-model="queryParams.devicetype" :localdata="adviceTypeList"
						:clear="true"></uni-data-select>
					<view class="line"></view>
					<uni-data-select placeholder="状态" class="two" v-model="queryParams.status"
						:localdata="adviceStatusList" :clear="true"></uni-data-select>
					<view class="line"></view>
					<input type="text" placeholder="请输入设施名称" v-model="queryParams.devicename"
						placeholder-class="ipt-class" />
				</view>
				<button @click="getEnterpriseDevice">查询</button>

			</view>
			<view class="device-num">
				共有<text style="color:#0874FA">{{totalVal}}</text>个设施
			</view>
			<view class="list">
				<noData v-if="enterpriseDeviceList.length==0" />
				<view class="item" v-for="item in enterpriseDeviceList" :key="item.id" @click="jumpDetail(item.id)">
					<image class="bgc-icon"
						src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/beijing-icon.png">
					</image>
					<view class="title-wrap">
						<view class="title">
							设施名称：{{item.devicename}}
						</view>
						<image
							src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/right-arrow.png"
							mode=""></image>
					</view>
					<view class="line-one">
						<view class="left">设施编号：{{item.devicecode}}</view>
						<view class="right">更换周期：{{item.recircledays}}天</view>
					</view>
					<view class="line-two">
						<view class="left">设施状态： <text
								:style="item.status==1?'color:#0874FA':'color:#FF0000'">{{item.status==1?'正常':'停用'}}</text>
						</view>
						<view class="right">安装位置：{{item.installposition}}</view>
					</view>
				</view>




			</view>
		</view>



	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import ratioPhone from '../../request/ratioPhone.js'
	import getAreaText from '../../request/getAreaText.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed
	} from 'vue'
	import loginVue from '../../pages/login/login.vue'
	let enterpriseId = ref('')
	let queryParams = reactive({})
	let selVal = ref(1)
	let totalVal = ref('')
	let enterpriseType = ref(1)
	let name = ref("产废企业")
	let adviceTypeList = ref([])
	let enterpriseDeviceList = ref([])
	let dataTree = ref([])
	let adviceStatusList = ref([])
	let enterpriseDetail = ref({})
	let agent = ref(1)
	let imgStyle = reactive({})
	onLoad((e) => {
		console.log(e, 'e');
		enterpriseType.value = e.type
		agent.value = e.agent
		name.value = enterpriseType.value == 1 ? '处置企业' : '产废企业'
		enterpriseId.value = e.id || ''
		console.log('ok1');
		if (enterpriseType.value == 1) {
			getEnterpriseMsg()
		} else {
			queryParams.enterpriseid = enterpriseId.value
			getDisposeEnterpriseMsg()

		}
		console.log('ok1');
	})
	let callPhone = () => {
		uni.makePhoneCall({
			phoneNumber: enterpriseDetail.value.hbmobile //仅为示例
		});
	}
	let computedBgc = computed(() => {

		if (enterpriseDetail.value?.status == 1) {
			return {
				backgroundImage: "url('https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/status-bgc.png')"
			}
		} else if (enterpriseDetail.value?.status == 2) {
			return {
				backgroundImage: "url('https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/red-status-icon.png')"
			}
		} else {
			return {
				backgroundImage: "url('https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/status-bgc.png')"
			}
		}


	})

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)

			dataTree.value = data
			console.log(dataTree.value);
		}

	})
	let sendMsg = () => {


		let msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS)
		msg.to = ['13666666666']
		msg.body = 'Hello'
		plus.messaging.sendMessage(msg)


	}
	onShow(() => {
		getEnterpriseDevice()
	})
	/* 处置企业详情 */
	let getEnterpriseMsg = () => {

		http({
			url: '/enterpriseThird/detail',
			data: {
				id: enterpriseId.value
			}
		}).then((res) => {
			if (res.code == 0) {
				enterpriseDetail.value = res.data
				let img = enterpriseDetail.value.lawimageurl || enterpriseDetail.value.dischargelicenseurl
				uni.getImageInfo({
					src: img,
					success: function(res) {
						console.log(res, 'res');
						let width = res.width
						let height = res.height
						let result = ratioPhone(width, height)
						imgStyle.width = result.width
						imgStyle.height = result.height

					}
				})

			}

		})
	}

	let searchImg = (one, two) => {
		let url = one || two
		uni.previewImage({
			urls: [url],
			current: 0
		})
	}
	let getDisposeEnterpriseMsg = () => {
		http({
			url: '/enterprise/detail',
			data: {
				id: enterpriseId.value
			}
		}).then((res) => {
			if (res.code == 0) {
				enterpriseDetail.value = res.data
				let img = enterpriseDetail.value.lawimageurl || enterpriseDetail.value.dischargelicenseurl
				uni.getImageInfo({
					src: img,
					success: function(res) {
						console.log(res, 'res');
						let width = res.width
						let height = res.height
						let result = ratioPhone(width, height)
						imgStyle.width = result.width
						imgStyle.height = result.height

					}
				})
			}

		})

	}
	let getEnterpriseDevice = () => {
		http({
			url: '/device/datalist',
			data: {
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				enterpriseDeviceList.value = res.data.list
				totalVal.value = res.data.total
			}
		})
	}

	let editEnterpriseMsg = () => {
		uni.navigateTo({
			url: `/contorllerPageOther/editenterprisemsg/editenterprisemsg?id=${enterpriseDetail.value.id}&type=${enterpriseType.value}&agent=${agent.value}`
		})
	}
	let jumpDetail = (id) => {

		if (agent.value == 1) {
			uni.navigateTo({
				url: `/contorllerPageOther/admineditdevicedetail/admineditdevicedetail?id=${id}&agent=${agent.value}`
			})
			/* agent修改 */

		} else {
			/* 正常跳转 */
			uni.navigateTo({
				url: `/contorllerPageOther/devicedetail/devicedetail?agent=${agent.value}&id=${id}`
			})
		}


	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B02'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceStatusList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id

				}

			})
		}

	})
	// let closeDeclare = () => {
	// 	http({
	// 		url: '/enterprise/doPermitApply',
	// 		data: {
	// 			status: '3',
	// 			id: enterpriseDetail.value.id
	// 		}
	// 	}).then((res) => {
	// 		if (res.code == 0) {
	// 			uni.showToast({
	// 				title: '关闭申报成功',
	// 				icon: 'none'
	// 			})
	// 			getDisposeEnterpriseMsg()
	// 		}
	// 	})
	// }
	let openDeclare = () => {

		let status = enterpriseDetail.value.openflag == 1 ? 2 : 1
		// openflag: 1  开  2 关
		http({
			url: '/enterprise/doPermitApply',
			data: {
				openflag: status,
				id: enterpriseDetail.value.id
			}
		}).then((res) => {
			if (res.code == 0) {
				let msg;
				if (status == 1) {
					msg = '开通申报成功'
				} else {
					msg = '关闭申报成功'
				}
				uni.showToast({
					title: msg,
					icon: 'none'
				})
				getDisposeEnterpriseMsg()
			}
		})
	}

	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
</script>

<style lang="scss" scoped>
	:deep(.uni-select) {
		border: none !important;


		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 24rpx;
		color: #999999;


	}

	.waste-enterprise-filtrate {
		width: 100vw;
		height: 100vh;
		background-color: #F3F5F7;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.sel-wrap {
			display: flex;
			justify-content: space-evenly;
			line-height: 95rpx;
			width: 749rpx;
			height: 95rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
			background-color: #FFFFFF;

			.active {
				position: relative;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;

				&::before {
					content: '';
					position: absolute;
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					left: 50%;
					transform: translateX(-50%);
					bottom: 16rpx;
				}
			}
		}





		//	企业详情
		.title-wrap {
			padding-top: 34rpx;

			width: 691rpx;
			height: 280rpx;
			background: #FFFFFF;
			border-radius: 21rpx;
			margin: 0 auto;
			position: relative;

			.contact {
				display: flex;
				align-items: center;
				margin-top: 62rpx;
				justify-content: center;

				.phone,
				.msg {
					display: flex;
					align-items: center;
					font-weight: 500;
					font-size: 21rpx;
					color: #0874FA;

					image {
						margin-right: 15rpx;
					}
				}

				.phone {
					image {
						width: 26rpx;
						height: 27rpx;
					}
				}

				.line {
					width: 2rpx;
					height: 17rpx;
					background: #D8D8D8;
					margin: 0 60rpx;
				}

				.msg {

					image {
						width: 30rpx;
						height: 27rpx;
					}
				}
			}

			.status {
				position: absolute;
				width: 110rpx;
				height: 39rpx;

				background: url("../../static/status-bgc.png") no-repeat;
				background-size: contain;
				font-weight: 500;
				font-size: 21rpx;
				color: #FFFFFF;
				top: 37rpx;
				text-align: center;
				line-height: 39rpx;
				right: 0;
				z-index: 99;
			}

			.title {
				display: flex;
				align-items: center;
				padding-left: 27rpx;

				image {
					width: 125rpx;
					height: 108rpx;
					margin-right: 8rpx;
				}

				.detail {
					display: flex;
					flex-direction: column;
					height: 125rpx;
					justify-content: space-between;

					.name {

						font-weight: bold;
						font-size: 33rpx;
						color: #222222;

					}

					.unit {

						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

					}

					.address {

						font-weight: 400;
						font-size: 24rpx;
						color: #999999;

					}
				}
			}
		}

		.enterprise-detail-height {}

		.enterprise-detail-height-two {
			overflow: auto;
			height: calc(100vh - 160rpx)
		}

		.enterprise-detail {
			margin-top: 15rpx;

			background-color: #fff;
			display: flex;
			flex-direction: column;

			padding-bottom: 43rpx;

			.admin-btn {
				margin-top: 45rpx;

				button {
					margin: 0 auto;

					width: 672rpx;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;


					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 88rpx;
				}
			}

			.btn-wrap {
				margin-top: 45rpx;
				display: flex;
				align-items: center;
				padding: 0 57rpx;
				justify-content: space-between;

				button {
					width: 100%;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 88rpx;

				}
			}

			.code-wrap {
				margin-top: 25rpx;
				// width: 667rpx;
				// height: 353rpx;
				background: #FFFFFF;
				border-radius: 14rpx;
				border: 1px dashed #BFBFBF;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;
				margin-left: 41rpx;
				padding: 10rpx;

				image {
					width: 304rpx;
					border-radius: 10rpx;
					height: 235rpx;
				}
			}

			.main {
				margin-top: 35rpx;
				padding-left: 48rpx;
				padding-right: 45rpx;
				display: flex;
				justify-content: space-between;

				text {


					font-weight: 400;
					font-size: 31rpx;
					color: #666666;


				}

				.val {


					font-weight: 400;
					font-size: 33rpx;
					color: #333333;


				}
			}
		}

		/* 企业设施 */
		.enterprise-device {
			.list {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: calc(100vh - 160rpx - 95rpx - 84rpx - 80rpx);
				overflow: auto;
				padding-bottom: 40rpx;

				.item:first-child {
					margin-top: 0 !important;
				}

				.item {
					width: 690rpx;
					height: 269rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					position: relative;
					padding-left: 27rpx;
					padding-right: 38rpx;
					margin-top: 23rpx;
					flex-shrink: 0;

					.bgc-icon {
						position: absolute;
						left: 0;
						width: 690rpx;
						height: 25rpx;
						top: 84rpx;
					}

					.title-wrap {
						display: flex;
						align-items: center;
						height: 66rpx;

						justify-content: space-between;
						width: 100%;

						.title {

							font-weight: 500 !important;
							font-size: 31rpx !important;
							color: #333333 !important;
							padding-left: 0;
						}

						image {
							width: 14rpx;
							height: 26rpx;
						}
					}

					.line-one {
						margin-top: 60rpx !important;
					}

					.line-two {
						margin-top: 30rpx !important;
					}

					.line-one,
					.line-two {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						margin-top: 34rpx;

						.left {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}

						.right {
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}
					}
				}
			}

			.device-num {

				font-weight: 500;
				font-size: 22rpx;
				color: #666666;
				margin-top: 22rpx;
				margin-bottom: 24rpx;
				padding-left: 30rpx;
			}

			.search-wrap {

				width: 750rpx;


				margin-top: 18rpx;
				display: flex;
				padding-left: 22rpx;
				padding-right: 22rpx;
				display: flex;
				justify-content: space-between;

				.type-wrap {
					width: 100%;
					display: flex;
					flex: 1;
					align-items: center;
					padding-left: 48rpx;
					height: 86rpx;

					:deep(.uni-select) {
						border: none;
						width: 180rpx;

					}

					:deep(.uni-select__input-text, .uni-select__input-placeholder) {
						font-weight: 400 !important;
						font-size: 28rpx !important;
						color: #333333 !important;
					}

					:deep(.uni-icons, .uniui-clear) {
						font-size: 32rpx !important;
					}

					.two {
						margin-left: 80rpx !important;
					}
				}

				button {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;

					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;
				}

				.ipt-wrap {
					width: 574rpx;
					height: 67rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					padding-left: 6rpx;
					display: flex;
					align-items: center;


					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin-left: 15rpx;
						margin-right: 10rpx;
					}

					input {
						flex-grow: 1;
						font-weight: 400;
						font-size: 25rpx;
						color: #666666;
						padding-left: 14rpx;
						padding-right: 8rpx;

					}

					image {
						flex-shrink: 0;
						width: 28rpx;
						height: 28rpx;
						padding-right: 10rpx;
					}
				}
			}
		}


	}
</style>